<template>
    <view class="main">
        <image class="productImg" :src="productInfo.image" mode=""></image>
        <view class="productContent">
            <text class="price">{{productInfo.price}}</text>
            <text class="promotion">预估返利：<text class="promotionPrice">{{productInfo.promotion}}</text></text>
            <text class="illustrate">
                返利由实付金额决定，因拼多多平台限制，一小时之后购买得到的返利最多
            </text>
            <view class="productTitle">
                {{productInfo.title}}
            </view>
        </view>
        <button type="primary" class="buyBtn" @click="goBuy">去拼多多购买</button>
    </view>
</template>

<script>
    import {
        GetProductInfo,
        UpdateLink
    } from "@/services/ProductService"
    import {
        getTime
    } from "@/utils/utils"
    export default {
        data() {
            return {
                productInfo: {
                    channel: "",
                    goods_sign: "",
                    image: "",
                    price: 0,
                    promotion: 0,
                    title: "",
                    h5_link: "",
                    we_app_info: {}
                }
            }
        },
        methods: {
            async asyncGetProductInfo() {
                this.showLoading()
                let productInfoRes = await GetProductInfo({
                    goods_sign: this.productInfo.goods_sign,
                    timestamp: getTime()
                })
                if (productInfoRes.code == 0) {
                    this.productInfo = productInfoRes.datas.product_info;
                    console.log('this.productInfo========>', this.productInfo.h5_link);
                }else{
                    this.tostMsg('网络太慢，请求不到')
                    return false;
                }
                this.hideLoading()
            },
            goBuy: function() {
                // #ifdef H5
                // 打开h5领券页面
                window.open(this.productInfo.h5_link)
                // #endif
                // #ifndef H5
                // 打开拼多多小程序
                wx.setClipboardData({
                    showToast: false,
                    data: this.productInfo.h5_link,
                    success: function() {
                        wx.hideLoading()
                        wx.hideToast()
                        wx.showModal({
                            title: '成功',
                            content: '链接复制成功，请用浏览器打开',
                            showCancel: false,
                            confirmText: "了解",
                            success: function(res) {
                                if (res.confirm) {
                                    // console.log('用户点击确定');
                                } else if (res.cancel) {
                                    // console.log('用户点击取消');
                                }
                            }
                        });
                    }
                });
                // 以下是跳转拼多多小程序
                // wx.navigateToMiniProgram({
                //     appId: this.productInfo.we_app_info.app_id,
                //     path: this.productInfo.we_app_info.page_path,
                //     extraData: {
                //         foo: 'bar'
                //     },
                //     // envVersion: 'develop', //正式版
                //     envVersion: 'release', //真机测试
                //     success(res) {
                //         // 打开成功
                //         console.log(res)
                //     },
                //     fail: function(e) {
                //         console.log(e)
                //     }
                // })
                // #endif
            }
        },
        onLoad(e) {
            let goodsSign = e.goods_sign;
            this.productInfo.goods_sign = goodsSign;
            this.asyncGetProductInfo()
        }
    }
</script>

<style lang="scss" scoped>
    .main {
        background-color: #ededed;
        padding-bottom: 30rpx;

        .productImg {
            width: 100%;
            height: 700rpx;
            margin-bottom: 10rpx;
        }

        .productContent {
            width: 94%;
            border: 0rpx solid red;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 30rpx;

            margin: {
                top: 10rpx;
            }

            ;

            padding: {
                top: 10rpx;
                bottom: 20rpx;
            }

            ;

            .price {
                font-size: 40rpx;
                margin-left: 20rpx;

                :before {
                    content: "￥";
                    color: #868686;
                    font-size: 24rpx;
                }
            }

            .promotion {
                margin-left: 20rpx;
                font-size: 26rpx;
                background-color: #ed2a29;
                color: #fff;
                padding: 10rpx;
                border-radius: 25rpx;

                .promotionPrice {
                    display: inline-block;
                    font-size: 34rpx;


                    :before {
                        content: "￥";
                        font-size: 24rpx;
                        color: #fff;
                    }
                }
            }

            .illustrate {
                color: #d45e63;
                display: block;
                background-color: #f5a7be;
                // width: 220rpx;
                font-size: 24rpx;

                margin: {
                    top: 20rpx;
                    left: 20rpx;
                }

                ;
                padding: 8rpx;
                border-radius: 10rpx;
            }

            .productTitle {
                font-size: 32rpx;
                width: 94%;
                margin: 0 auto;
                margin-top: 10rpx;
            }
        }

        .buyBtn {
            width: 94%;
            margin: 0 auto;
            margin-top: 20rpx;
            font-size: 24rpx;
        }
    }
</style>